<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/static/bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">

    <link rel="stylesheet" href ="/static/select2/css/select2.min.css"> 

    <link rel="stylesheet" href="/static/css/style.css">

    <script src="/static/jquery-3.4.1.min.js"></script>
    <script src="/static/bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="/static/moment-with-locales.js"></script>
    <script src="/static/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="/static/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    
    <script src="/static/select2/js/select2.full.min.js"></script>
    <script src="/static/select2/js/i18n/zh-CN.js"></script>

    <script src="/static/js/utily.js"></script>
    <script src="/static/js/comm.js"></script>
    <script src="/static/js/nav.js"></script>
    <script src="/static/js/fusion.js"></script>
 
    <title>Seaglet激光测风雷达数据共享平台</title>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src = "/static/img/seaglet.png" width="240" height = "65">
                </a>
            </div>
        </div>

        <div class="collapse navbar-collapse" id="responsive-navbar">
            <p class="navbar-text"><b><font size="6">激光测风雷达数据共享平台</font></b></p>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="javascript:;" onclick = "nav_catalog('首页');return false">首页</a>
                </li>
                <li>
                    <a href="javascript:;" onclick = "nav_catalog('激光雷达');return false">激光雷达</a>
                </li>
                <li class="active">
                    <a href="javascript:;" onclick = "nav_catalog('融合产品');return false">融合产品</a>
                </li>
                <li>
                    <a href="javascript:;" onclick = "nav_catalog('T-logP图');return false">T-logP图</a>
                </li>
                <li>
                    <a href="javascript:;" onclick = "nav_catalog('统计查询');return false">统计查询</a>
                </li>
                <li>
                    <a href="javascript:;" onclick = "nav_catalog('服务咨询');return false">服务咨询</a>
                </li>
                <li>
                    <a href="javascript:;" onclick = "nav_catalog('关于我们');return false">关于我们</a>
                </li>
            </ul>
        </div>
    </nav>


    <div class="container  col-lg-2 col-md-2">
        <div class = "panel panel-default">
            <div class="panel-heading">融合产品</div>
            <div class="panel-body">
                <div class="list-group" id="product-list-group">
                    <li class="list-group-item" onclick="load_fusion('激光雷达DBS-5')">激光雷达DBS-5</li>
                    <li class="list-group-item active" onclick="load_fusion('叠加风廓线')">叠加风廓线</li>
                    <li class="list-group-item" onclick="load_fusion('叠加微波辐射计')">叠加微波辐射计</li>
                </div>
            </div>  
        </div>  
        <div class='panel panel-default'>
            <div class="panel-heading">参数选项</div>
            <div class="panel-body">
                <div class="form-group">
                    <label for="height-select">时间:</label>
                    <div>
                        <select class="select2" name="datetime-select" id="datetime-select">
                            {% for tlabel in tlabels %}
                            <option value='{{ tlabel.date_time|date:"Y-m-d H:i:s" }}'>{{ tlabel.date_time|date:"Y-m-d H:i:s" }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="list-group" id ="fusion-list-group">
                    <label>融合要素:</label>                          
                    <li class="list-group-item active" id="激光雷达+风廓线">激光雷达+风廓线</li>
					<li class="list-group-item" id="激光雷达">激光雷达</li>
                </div>
                <button type="button"  class="btn btn-default" onclick="fusion_search('profile')">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 检索
                </button>
                <button type="button"  class="btn btn-default" onclick="fusion_auto_update()">
                    <span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span> 实时
                </button>
            </div>
        </div>
    </div>

    <div class="container col-lg-8 col-md-8">
        <center>
            {% if product_type == '全站' %}
                {% if product_sum == 0 %}
                <div>
                    <br/>
                    <p>未检索到满足条件的数据，请调整检索条件再次重试!</p>
                </div>
                {% elif product_sum == 1 %}
                <div>
                    <img src = "{{product_sum_0.first.img_src}}" width="80%"/>
                    <br/>
                    <span>{{product_sum_0.first.station}},{{product_sum_0.first.fusion}},{{product_sum_0.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                </div>
                {% elif product_sum == 2 %}
                <div>
                    <div class = 'left-img'>
                        <img src = "{{product_sum_0.first.img_src}}" width="95%"/>
                        <br/>
                        <span>{{product_sum_0.first.station}},{{product_sum_0.first.fusion}},{{product_sum_0.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                    </div>
                    <div class = 'right-img'>
                        <img src = "{{product_sum_1.first.img_src}}" width="95%"/>
                        <br/>
                        <span>{{product_sum_1.first.station}},{{product_sum_1.first.fusion}},{{product_sum_1.first.date_time|date:"Y-m-d H:i:s"}}</span>
                    </div>
                </div>
                {% elif product_sum == 3 %}
                <div>
                    <div>
                        <div class = 'left-img'> 
                            <img src = "{{product_sum_0.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_0.first.station}},{{product_sum_0.first.fusion}},{{product_sum_0.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div> 
                        <div class = 'right-img'>  
                            <img src = "{{product_sum_1.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_1.first.station}},{{product_sum_1.first.fusion}},{{product_sum_1.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div>
                    </div>
                    <div>
                        <div class = 'left-img'>
                            <img src = "{{product_sum_2.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_2.first.station}},{{product_sum_2.first.fusion}},{{product_sum_2.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div>
                    </div>
                </div>
                {% elif product_sum == 4 %}
                <div>
                    <div>
                        <div class = 'left-img'> 
                            <img src = "{{product_sum_0.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_0.first.station}},{{product_sum_0.first.fusion}},{{product_sum_0.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div> 
                        <div class = 'right-img'>  
                            <img src = "{{product_sum_1.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_1.first.station}},{{product_sum_1.first.fusion}},{{product_sum_1.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div>
                    </div>
                    <div>
                        <div class = 'left-img'>
                            <img src = "{{product_sum_2.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_2.first.station}},{{product_sum_2.first.fusion}},{{product_sum_2.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div>
                        <div class = 'right-img'>
                            <img src = "{{product_sum_3.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_3.first.station}},{{product_sum_3.first.fusion}},{{product_sum_3.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div>
                    </div>
                </div>
                {% elif product_sum == 5 %}
                <div>
                    <div>
                        <div class = 'left-img'> 
                            <img src = "{{product_sum_0.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_0.first.station}},{{product_sum_0.first.fusion}},{{product_sum_0.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div> 
                        <div class = 'right-img'>  
                            <img src = "{{product_sum_1.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_1.first.station}},{{product_sum_1.first.fusion}},{{product_sum_1.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div>
                    </div>
                    <div>
                        <div class = 'left-img'>
                            <img src = "{{product_sum_2.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_2.first.station}},{{product_sum_2.first.fusion}},{{product_sum_2.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div>
                        <div class = 'right-img'>
                            <img src = "{{product_sum_3.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_3.first.station}},{{product_sum_3.first.fusion}},{{product_sum_3.first.date_time|date:"Y-m-d H:i:s"}}</span> 
                        </div>
                    </div>
                    <div>
                        <div class = 'left-img'>
                            <img src = "{{product_sum_4.first.img_src}}" width="95%">
                            <br/>
                            <span>{{product_sum_4.first.station}},{{product_sum_4.first.fusion}},{{product_sum_4.first.date_time|date:"Y-m-d H:i:s"}}</span>   
                        </div>
                    </div>
                </div>
                {% endif %}
            {% else %}
                {% if profiles|length == 0 %}
                <div>
                    <br/>
                    <p>未检索到满足条件的数据，请调整检索条件再次重试!</p>
                </div>
                {% else %}
                <div>
                    {% for profile in profiles %}
                    {% if forloop.last %}
                    <img id="active_img" src = "{{profile.img_src}}" width="80%"/>
                    {% endif %}
                    {% endfor %}
                </div>
                <br/>
                <div class="btn-group" role="group" id="title-btn-group">
                    {% for profile in profiles %}

                    {% if forloop.first%}
                    <button type="button" class="btn btn-default" id="btn-last" onclick="fusion_last_search('profile','{{ profile.date_time|date:"Y-m-d H:i:s" }}')" aria-label="Left Align">
                        <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
                    </button>
                    {% endif %}
                    
                    <button type="button" 
                            class="btn btn-default {% if forloop.last %}active{% endif %}"
                            onclick="update_img('{{profile.img_src}}')"
                            id = '{{ profile.date_time|date:"Y-m-d H:i:s" }}'>
                        <td>{{profile.station}},{{profile.fusion}},{{ profile.date_time|date:"Y-m-d H:i:s" }}</td>
                    </button>

                    {% if forloop.last %}
                    <button type="button" class="btn btn-default" id="btn-next" onclick="fusion_next_search('profile','{{ profile.date_time|date:"Y-m-d H:i:s" }}')" aria-label="Left Align">
                        <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
                    </button>
                    {% endif %}

                    {% endfor %}
                </div>
                {% endif %}
            {% endif %}
        </center>
    </div>

    <div class="container  col-lg-2 col-md-2">
		<div class = "panel panel-default">
            <div class="panel-heading">观测站点</div>
            <div class="panel-body">
                <div class="list-group" id="city-list-group">
                    <li class="list-group-item active" id="全站" onclick="fusion_station('profile','全站')">全站</li>
                    <li class="list-group-item" id="翔安" onclick="fusion_station('profile','翔安')">翔安</li>
                    <li class="list-group-item" id="湖里" onclick="fusion_station('profile','湖里')">湖里</li>
                    <li class="list-group-item" id="集美" onclick="fusion_station('profile','集美')">集美</li>
                    <li class="list-group-item" id="海沧" onclick="fusion_station('profile','海沧')">海沧</li>
                    <li class="list-group-item" id="同安" onclick="fusion_station('profile','同安')">同安</li>
                </div>
            </div>  
        </div>  
        <div class = "panel panel-default">
            <div class="panel-heading">历史查询</div>
            <div class="panel-body">
                <form>
                    <div class="form-group">
                        <label for="datetimepick_start">起始时间:</label>
                        <div class="input-group date" id="datetimepick_start">
                            <input type="text" class="form-control" id="datetimepick_start_input"/>
                            <span class="input-group-addon"> 
                                <span class="glyphicon glyphicon-calendar"/>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="datetimepick_end">结束时间:</label>
                        <div class="input-group date" id="datetimepick_end">
                            <input type="text" class="form-control" id="datetimepick_end_input"/>
                            <span class="input-group-addon"> 
                                <span class="glyphicon glyphicon-calendar"/>
                            </span>
                        </div>
                    </div>
                    <button type="button"  class="btn btn-default" onclick="fusion_auto_refresh('profile')">
                        <span class="glyphicon glyphicon-hourglass" aria-hidden="true"> 浏览
                    </button>
                </form>
            </div>  
        </div>  
    </div>
</body>
</html>
